<template>
    <div class="block_main blue-tit">
        <!-- <div class="nytit">首页&gt;通知/督办</div> -->
        <el-row style="padding-top: 10px">
            <el-col :span="24" style="padding:0 5px">
                <el-card>
                    <div class="title">
                        <em>{{menutitle}}</em>
                    </div>
                    <el-col :span="24" style="text-align:right;padding:0 10px 10px 0;"></el-col>
                    <!-- 筛选 -->
                    <el-form
                        style="padding:20px 20px 0"
                        :inline="true"
                        :model="filter"
                        class="demo-form-inline"
                        size="small"
                    >
                        <el-form-item label="搜索名称">
                            <el-input v-model="filter.name"></el-input>

                            <!-- <el-button type="success" @click="AddQuestion">新建诉求</el-button> -->
                        </el-form-item>
                        <el-button @click="filterFn" type="primary" size="small">查询</el-button>
                        <el-button @click="addMenu" type="success" size="small">新增分类</el-button>
                        <!-- <span style="float:right;line-height:40px;">累计{{pagetotal}}项</span> -->
                    </el-form>
                    <!-- 筛选结束 -->
                    <el-table border :data="tableData" style="width: 100%" v-loading="loading">
                        <el-table-column type="index" width="70" label="序号" fixed></el-table-column>
                        <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="pic_num" label="图片编码">
                            <template slot-scope="scope">
                                <span>{{scope.row.pic_num}}</span>
                                <i class="iconfont" v-html="scope.row.pic_num"></i>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button
                                    @click="edit(scope.row,scope.$index)"
                                    type="text"
                                    size="mini"
                                >编辑</el-button>
                                <el-button
                                    @click="delMenu(scope.row,scope.$index)"
                                    type="text"
                                    size="mini"
                                >删除</el-button>
                                <el-button
                                    @click="seeDetail(scope.row,scope.$index)"
                                    type="text"
                                    size="mini"
                                >查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 翻页 -->
                    <div class="zpage">
                        <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size.sync="pagesize"
                            layout="total, prev, pager, next, jumper"
                            :total.sync="pagetotal"
                        ></el-pagination>
                    </div>
                    <!-- 翻页 end -->
                </el-card>
            </el-col>
        </el-row>

        <!-- 新增分类名称 -->
        <el-dialog :title="layerTitle" :visible.sync="dialogVisibleSupervise" width="30%">
            <el-form
                ref="form"
                style="margin:20px;"
                :model="layerForm"
                label-width="100px"
                size="small"
            >
                <el-form-item label="菜单名称" style="width:100%;">
                    <el-input type="text" v-model="layerForm.name" rows="5" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="分类图片代码" style="width:100%;">
                    <el-input
                        type="text"
                        v-model="layerForm.pic_num"
                        rows="5"
                        placeholder="请输入菜单名称"
                    ></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeLayer" size="mini">取 消</el-button>
                <el-button type="primary" @click="Submit" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>确定删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogSrue">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";

export default {
    components: {},
    data() {
        return {
            filter: {},
            layerTitle: "新增",
            dialogVisibleSupervise: false,
            dialogVisible: false,
            loading: false,
            Sid: "",
            menutitle: "行政权力",
            layerForm: {},
            tableData: [],
            currentPage: 1,
            pagesize: 10,
            pagetotal: 10000
        };
    },
    components: {},

    methods: {
        handleCurrentChange(val) {
            this.currentPage == val;
            this.getList();
        },
        filterFn() {
            this.getList();
        },
        getList() {
            //获取列表信息
            var _this = this;
            actionurl.getGroupList(
                {
                    type: 2, //行政权力
                    pageOn: _this.currentPage,
                    pageNum: 10,
                    name: _this.filter.name
                },
                function(re) {
                    _this.tableData = re.data;
                    _this.pagetotal = re.count;
                }
            );
        },
        getUserinfo() {
            //获取用户信息
            var _this = this;
            actionurl.getUserInfo({}, function(re) {
                // _this.MessageList();
            });
        },
        edit(row) {
            //编辑弹窗并获取信息
            this.Sid = row.id;
            this.layerTitle = "编辑";
            var _this = this;
            actionurl.getEditInfo(
                {
                    id: row.id //办事企业
                },
                function(re) {
                    // console.log(re);
                    _this.dialogVisibleSupervise = true;
                    _this.layerForm.name = re.data.name;
                    _this.layerForm.pic_num = re.data.pic_num;
                    // _this.tableData = re.data;
                }
            );
            // this.$router.push({path: '/serviceEdit/2'});
        },
        seeDetail(row) {
            this.$router.push({
                path: "/secondList/" + row.id + "/" + row.name
            });
        },
        delMenu(row) {
            this.dialogVisible = true;
            this.Sid = row.id;
        },
        dialogSrue() {
            //弹窗确定事件
            this.delMenuUrlFn();
        },
        delMenuUrlFn() {
            //删除事件
            var _this = this;
            actionurl.Wgroupdel(
                {
                    id: _this.Sid
                },
                function(re) {
                    _this.loading = false;
                    _this.dialogVisible = false;
                    _this.$message(re.msg);
                    if (re.status == 1) {
                        _this.getList();
                    }
                }
            );
        },
        Submit() {
            //弹窗确定按钮
            this.loading = true;
            if (this.layerTitle == "新增") {
                this.addUrlFn();
            } else if (this.layerTitle == "编辑") {
                this.editUrlFn();
            }
        },
        addMenu() {
            //添加菜单弹窗事件
            this.dialogVisibleSupervise = true;
            this.layerForm.name = "";
            this.layerForm.pic_num = "";
        },
        addUrlFn() {
            //添加方法
            var _this = this;
            actionurl.addGroup(
                {
                    type: 2, //行政权力
                    name: _this.layerForm.name,
                    pic_num: _this.layerForm.pic_num
                },
                function(re) {
                    _this.loading = false;
                    _this.dialogVisibleSupervise = false;
                    _this.$message(re.msg);
                    if (re.status == 1) {
                        _this.getList();
                    }
                }
            );
        },
        editUrlFn() {
            //编辑事件
            var _this = this;
            actionurl.WdoGroupEdit(
                {
                    type: 2, //行政权力
                    id: _this.Sid,
                    name: _this.layerForm.name,
                    pic_num: _this.layerForm.pic_num
                },
                function(re) {
                    _this.loading = false;
                    _this.dialogVisibleSupervise = false;
                    _this.$message(re.msg);
                    if (re.status == 1) {
                        _this.getList();
                    }
                }
            );
        },
        //关闭弹窗事件
        closeLayer() {
            this.dialogVisibleSupervise = false;

            this.layerForm.name = "";
            this.layerForm.pic_num = "";
        }
    },
    created() {
        this.getList();
        // console.log(this.$route.params.type);
    }
};
</script>

<style lang="scss" scoped>
.iconfont {
    color: #444;
    margin-left: 10px;
}
</style>
